iT邦幫忙

2024 iThome 鐵人賽
DAY 23
0
自我挑戰組

asp.net可以變出那些功能系列 第 23 篇

網頁裡面還可以顯示網頁:員工交通

16th鐵人賽
124 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/GHG_MST_COMMUTE_Index

https://ithelp.ithome.com.tw/upload/images/20240930/2011903551f73xwctm.png
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>

USE [ProductDB]
GO

/****** Object:  Table [dbo].[GHG_MST_COMMUTE]    Script Date: 2024/9/27 下午 08:54:51 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[GHG_MST_COMMUTE](
	[USEDT] [datetime2](7) NOT NULL,
	[USER_ID] [nvarchar](200) NOT NULL,
	[USER_NAME] [nvarchar](200) NOT NULL,
	[TRANSPORTATION] [nvarchar](200) NOT NULL,
	[ONEWAY_KM] [decimal](18, 2) NOT NULL,
	[data] [datetime] NULL,
	[CreatedBy] [nvarchar](max) NULL,
	[DOUBLE_KM] [decimal](18, 2) NULL,
 CONSTRAINT [PK_GHG_MST_COMMUTE] PRIMARY KEY CLUSTERED 
(
	[USER_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

解釋程式碼
這段SQL腳本是用於在數據庫 ProductDB 中創建一張名為 [GHG_MST_COMMUTE] 的表。它定義了表的結構、字段以及主鍵約束。以下是詳細解釋：

代碼分析：

  1. USE [ProductDB]:
    選擇並使用數據庫 ProductDB 作為當前操作的數據庫。

  2. SET ANSI_NULLS ON:
    開啟 ANSI_NULLS 設置，這意味著在 SQL 中使用 = 和 <> 比較時，NULL 值不會被認為等於任何值。

  3. SET QUOTED_IDENTIFIER ON:
    開啟 QUOTED_IDENTIFIER，這允許在雙引號內引用對象名稱（例如列或表名稱），並區分與字符串常量的單引號。

  4. CREATE TABLE [dbo].[GHG_MST_COMMUTE]:
    創建表 GHG_MST_COMMUTE，存儲與通勤相關的數據。表的字段及其數據類型如下：

    • NOT NULL: 日期時間字段，精度為 7 位，用於記錄使用日期，不能為空。
    • NOT NULL: 用戶 ID，最大長度為 200 的字符串，不能為空。
    • NOT NULL: 用戶名，最大長度為 200 的字符串，不能為空。
    • [TRANSPORTATION] [nvarchar](200) NOT NULL: 交通方式，最大長度為 200 的字符串，不能為空。
    • [ONEWAY_KM] [decimal](18, 2) NOT NULL: 單程距離，精度為18，總位數2位小數，不能為空。
    • [data] [datetime] NULL: 日期時間字段，可以為空。
    • [CreatedBy] [nvarchar](max) NULL: 創建者，字符串類型，可以存儲任意長度的數據，可以為空。
    • [DOUBLE_KM] [decimal](18, 2) NULL: 雙程距離，精度為18，總位數2位小數，可以為空。

  5. 主鍵約束:

    CONSTRAINT [PK_GHG_MST_COMMUTE] PRIMARY KEY CLUSTERED 
(
    [USER_ID] ASC
)
    • 定義主鍵為 USER_ID 列，表示每個用戶的 ID 都是唯一的，並以升序排列。

  6. 索引及存儲設置:

    • WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF): 這些選項用於配置主鍵索引的行為，比如是否允許行鎖和頁鎖等。
    • ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]: 指定表的數據和 BLOB 類型數據（如 nvarchar(max)）存儲在 PRIMARY 文件組中。

總結：

該表的設計用於記錄用戶的通勤信息，如通勤日期、交通方式、單程和雙程的距離等。表的主鍵是 USER_ID，確保每個用戶的記錄是唯一的。

產生Models裡面類別檔dao>按:建置>

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;

    [Table("GHG_MST_COMMUTE")]
    public partial class GHG_MST_COMMUTE
    {
        [Column(TypeName = "datetime2")]
        public DateTime USEDT { get; set; }

        [Display(Name = "員工編號")]

        [Key]
        [Required]
        [StringLength(200)]
        public string USER_ID { get; set; }


        [Display(Name = "姓名")]
        [Required]
        [StringLength(200)]
        public string USER_NAME { get; set; }

        [Display(Name = "交通工具")]
        [Required]
        [StringLength(200)]
        public string TRANSPORTATION { get; set; }

        [Display(Name = "單程公里數")]
        [Required]

        public decimal? ONEWAY_KM { get; set; }

        [Display(Name = "來回公里數")]
        /*public decimal? DOUBLE_KM { get; set; }*/
        public decimal? DOUBLE_KM
        {
            get { return ONEWAY_KM * 2; }
            set { ONEWAY_KM = value / 2; }
        }

        [Display(Name = "建立時間")]
        public DateTime? data { get; set; }
        [Display(Name = "建立者")]
        public string CreatedBy { get; set; }
    }
}

解釋程式碼
這段程式碼定義了一個名為 GHG_MST_COMMUTE 的部分類別，該類別對應資料庫中的表格 "GHG_MST_COMMUTE"。這是一個用於儲存員工通勤相關資料的資料模型，使用了 Entity Framework 進行資料庫的操作。以下是對程式碼的詳細解釋：

  1. 命名空間與引用：

    • namespace WebApplication5.Models：類別屬於 WebApplication5.Models 命名空間。
    • using System.ComponentModel.DataAnnotations 和 using System.ComponentModel.DataAnnotations.Schema：這些引用提供了資料註解功能，如資料驗證和資料庫欄位對應。

  2. 類別定義：

    • public partial class GHG_MST_COMMUTE：類別是 partial 類別，表示它可能在不同的檔案中擁有其他部分。
    • [Table("GHG_MST_COMMUTE")]：表示這個類別對應資料庫中的表格 "GHG_MST_COMMUTE"。

  3. 屬性定義：

    • public DateTime USEDT { get; set; }：對應資料庫中的 USEDT 欄位，使用 datetime2 型別來表示日期時間。

    • public string USER_ID { get; set; }：

      • [Key]：表示 USER_ID 是主鍵。
      • [Required]：此欄位是必填的，不能為空。
      • [StringLength(200)]：此欄位的最大長度為 200。
      • [Display(Name = "員工編號")]：指定在前端顯示時的標籤名稱為 "員工編號"。

    • public string USER_NAME { get; set; }：

      • 必填項、最大長度為 200，顯示名稱為 "姓名"。

    • public string TRANSPORTATION { get; set; }：

      • 表示交通工具，同樣是必填項，長度上限為 200，顯示名稱為 "交通工具"。

    • public decimal? ONEWAY_KM { get; set; }：

      • 此欄位代表單程的公里數，允許為空（null），顯示名稱為 "單程公里數"。

    • public decimal? DOUBLE_KM：

      • 來回公里數的屬性，沒有直接對應資料庫的欄位，但它基於 ONEWAY_KM 自動計算。當 DOUBLE_KM 被設定時，ONEWAY_KM 會自動更新。
      • get { return ONEWAY_KM * 2; }：來回公里數等於單程公里數乘以 2。
      • set { ONEWAY_KM = value / 2; }：當設定來回公里數時，單程公里數會是來回公里數的一半。

    • public DateTime? data { get; set; }：建立時間，允許為空，顯示名稱為 "建立時間"。

    • public string CreatedBy { get; set; }：紀錄該條數據的建立者。

總結

這個類別主要是用於對應資料庫中的 "GHG_MST_COMMUTE" 表，存儲有關員工通勤的資料。包含的資訊有員工編號、姓名、交通工具、單程與來回公里數等。

ProductDBContext內容同前幾天~

Controllers裡面的Entities>

  public ActionResult GHG_MST_COMMUTE_Index(string userId, int page = 1)
        {
            int currentPage = page < 1 ? 1 : page;
            var allProducts = _db.GHG_MST_COMMUTE.ToList(); // 最初獲取所有數據
            var products = _db.GHG_MST_COMMUTE.AsQueryable();

            // 如果提供了參數，則應用篩選
            if (!string.IsNullOrEmpty(userId))
            {
                products = products.Where(x => x.USER_ID == userId);
            }



            products = products.OrderBy(x => x.USER_ID);

            var filteredProducts = products;

            // 根據年份進行附加篩選


            var result = filteredProducts.ToPagedList(currentPage, pageSize);

            // 將數據和篩選條件存儲在 ViewBag 中，以便在視圖中使用
            ViewBag.UserId = userId;

            ViewBag.AllProducts = allProducts;
            // 將 year 儲存到 ViewBag


            return View(result);
        }

解釋程式碼
這段 C# 代碼屬於 ASP.NET MVC 框架中的一個控制器動作方法，名為 GHG_MST_COMMUTE_Index，用於顯示分頁和篩選後的數據。

以下是詳細解釋：

  1. 方法參數：

    • string userId: 該參數用於接收用戶ID，如果提供了該值，則會根據它對數據進行篩選。
    • int page = 1: 這是分頁的頁碼，默認為1。

  2. 設置當前頁：

    int currentPage = page < 1 ? 1 : page;

    如果 page 參數小於1，將強制設置當前頁為1，否則保持提供的頁碼。

  3. 獲取所有數據：

    var allProducts = _db.GHG_MST_COMMUTE.ToList();

    從數據庫中獲取 GHG_MST_COMMUTE 表的所有數據，並存儲在 allProducts 變量中。

  4. 構建查詢：

    var products = _db.GHG_MST_COMMUTE.AsQueryable();

    使用 AsQueryable 方法將表轉為查詢對象，以便在之後根據條件動態添加篩選。

  5. 根據 userId 進行篩選：

    if (!string.IsNullOrEmpty(userId))
{
    products = products.Where(x => x.USER_ID == userId);
}

    如果 userId 參數不為空或不為 null，使用 Where 子句篩選出 USER_ID 匹配的記錄。

  6. 按 USER_ID 排序：

    products = products.OrderBy(x => x.USER_ID);

  7. 分頁處理：

    var result = filteredProducts.ToPagedList(currentPage, pageSize);

    使用分頁庫（如 PagedList），將查詢結果分頁展示。currentPage 是當前頁碼，pageSize 是每頁的記錄數量。

  8. 存儲數據到 ViewBag：

    • ViewBag.UserId = userId;：存儲傳入的 userId，以便在視圖中回顯或繼續使用。
    • ViewBag.AllProducts = allProducts;：存儲所有產品的列表，可能在視圖中展示所有記錄。

  9. 返回視圖：

    return View(result);

    將處理過的數據傳遞給視圖進行展示。

總結：此代碼展示的是分頁、篩選、排序和數據傳遞到視圖的流程，最終輸出符合條件的 GHG_MST_COMMUTE 表記錄。

產生畫面View程式碼


@using PagedList
@using PagedList.Mvc

@model IPagedList<WebApplication5.Models.GHG_MST_COMMUTE>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    ViewBag.Title = "GHG_MST_COMMUTE_Index";
}


<h2>作品-員工通勤</h2>


<style>
    .align-right {
        text-align: right;
    }
</style>

<link href="~/Content/PagedList.css" rel="stylesheet" />
<!DOCTYPE html>
<div style="margin-top: 50px;">
    <h2>員工通勤:列表</h2>
    <p>
        @Html.ActionLink("員工通勤:新增", "GHG_MST_COMMUTECreate", null, new { @class = "btn btn-danger" })
        @*@Html.ActionLink("員工通勤:新增", "GHG_MST_COMMUTECreate")*@
    </p>
    @using (Html.BeginForm("GHG_MST_COMMUTE_Index", "Home", FormMethod.Get))
    {
        <p>
            員工編號: @Html.TextBox("userId")
            <input type="submit" value="搜索" />

        </p>
    }
</div>

<table class="table" style="margin-top: 20px;">
    <thead>
        <tr>
            @*
                <th>
                    @Html.DisplayNameFor(model => model.FirstOrDefault().USEDT)
                </th>*@
            <th>
                @Html.DisplayNameFor(model => model.FirstOrDefault().USER_ID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstOrDefault().USER_NAME)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstOrDefault().TRANSPORTATION)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstOrDefault().ONEWAY_KM)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstOrDefault().DOUBLE_KM)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                @*<td>
                        @Html.DisplayFor(modelItem => item.USEDT)
                    </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.USER_ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.USER_NAME)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TRANSPORTATION)
                </td>
                <td class="align-right">
                    @Html.DisplayFor(modelItem => item.ONEWAY_KM)
                </td>
                <td class="align-right">
                    @Html.DisplayFor(modelItem => item.DOUBLE_KM)
                </td>

                <td>
                    @Html.ActionLink("修改", "GHG_MST_COMMUTE_Edit", new { id = item.USER_ID })
                    @*@Html.ActionLink("Details", "Details", new { id = item.USER_ID }) |*@
                    @*@Html.ActionLink("Delete", "Delete", new { id = item.USER_ID })*@
                </td>
            </tr>
        }
    </tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("GHG_MST_COMMUTE_Index", new
{

    page
}))
            </body>
            </html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖文件，使用了 PagedList 庫進行分頁展示數據，以下是其詳細解釋：

頂部部分：

@using PagedList
@using PagedList.Mvc

@model IPagedList<WebApplication5.Models.GHG_MST_COMMUTE>
  • @using PagedList 和 @using PagedList.Mvc 引入了分頁庫 PagedList 的命名空間，用於處理分頁功能。
  • @model IPagedList<WebApplication5.Models.GHG_MST_COMMUTE> 指定了視圖的模型類型為 IPagedList，它封裝了來自 GHG_MST_COMMUTE 表的數據模型，用於分頁顯示。

布局和標題：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    ViewBag.Title = "GHG_MST_COMMUTE_Index";
}
  • Layout 指定使用的布局文件為 ~/Views/Shared/_Layout.cshtml。
  • ViewBag.Title 設置頁面的標題為 "GHG_MST_COMMUTE_Index"。

頁面內容：

<h2>作品-員工通勤</h2>

<style>
    .align-right {
        text-align: right;
    }
</style>
<link href="~/Content/PagedList.css" rel="stylesheet" />
  • 標題 作品-員工通勤 用於描述頁面的主題。
  • 自定義樣式 align-right 將表格的某些列內容右對齊。
  • 引入 PagedList.css 樣式文件，格式化分頁控件的樣式。

搜索欄和新增按鈕：

<div style="margin-top: 50px;">
    <h2>員工通勤:列表</h2>
    <p>
        @Html.ActionLink("員工通勤:新增", "GHG_MST_COMMUTECreate", null, new { @class = "btn btn-danger" })
    </p>
    @using (Html.BeginForm("GHG_MST_COMMUTE_Index", "Home", FormMethod.Get))
    {
        <p>
            員工編號: @Html.TextBox("userId")
            <input type="submit" value="搜索" />
        </p>
    }
</div>
  • ActionLink：生成一個跳轉到 GHG_MST_COMMUTECreate 動作方法的鏈接，用於創建新的員工通勤記錄。按鈕使用了 btn btn-danger 樣式類。
  • Html.BeginForm：生成搜索表單，使用 GET 方法發送請求，提供一個 userId 文本框用於搜索指定員工編號的通勤數據。

數據表格：

<table class="table" style="margin-top: 20px;">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.FirstOrDefault().USER_ID)</th>
            <th>@Html.DisplayNameFor(model => model.FirstOrDefault().USER_NAME)</th>
            <th>@Html.DisplayNameFor(model => model.FirstOrDefault().TRANSPORTATION)</th>
            <th>@Html.DisplayNameFor(model => model.FirstOrDefault().ONEWAY_KM)</th>
            <th>@Html.DisplayNameFor(model => model.FirstOrDefault().DOUBLE_KM)</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.USER_ID)</td>
                <td>@Html.DisplayFor(modelItem => item.USER_NAME)</td>
                <td>@Html.DisplayFor(modelItem => item.TRANSPORTATION)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.ONEWAY_KM)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.DOUBLE_KM)</td>
                <td>
                    @Html.ActionLink("修改", "GHG_MST_COMMUTE_Edit", new { id = item.USER_ID })
                </td>
            </tr>
        }
    </tbody>
</table>
  • DisplayNameFor：顯示列的名稱，根據模型的屬性名自動生成表頭文字，如 USER_ID, USER_NAME, TRANSPORTATION。
  • DisplayFor：用於在表格中展示每個記錄的具體值，顯示員工的編號、姓名、交通方式、單程公里數和雙程公里數。
  • align-right：將 ONEWAY_KM 和 DOUBLE_KM 列的文本右對齊。
  • ActionLink：生成修改按鈕，跳轉到編輯頁面，用 USER_ID 作為參數。

分頁控件：

@Html.PagedListPager(Model, page => Url.Action("GHG_MST_COMMUTE_Index", new { page }))
  • PagedListPager：生成分頁控件，基於當前頁面的數據模型進行分頁。每次點擊分頁按鈕時，會向 GHG_MST_COMMUTE_Index 動作發送請求，傳遞頁碼 page 作為參數。

總結：

該視圖用於顯示 GHG_MST_COMMUTE 表中的員工通勤數據，支持分頁、搜索和基本的 CRUD 操作（目前僅顯示了新增和修改）。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
CRUD修改:水費
下一篇
要寫很多及BUTTON選取:出差申請單
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙